import React, { useState, memo } from 'react';
import { Tabs } from 'antd';
import KeepAliveHoc from '@/components/KeepAliveHoc';
import styles from './index.less';
import RealTimeAlarm from './components/RealTimeAlarm';
import HistoryAlarm from './components/HistoryAlarm';

const { TabPane } = Tabs;

const alarmTypeName = {
  REAL_TIME_ALARM: '实时告警',
  HISTORY_AKARM: '历史告警',
};

const Card = () => {
  const [activeTab, setActiveTab] = useState<string>('REAL_TIME_ALARM');

  const tabsChange: (activeKey: string) => void = (activeKey: string) => {
    setActiveTab(activeKey);
  };
  return (
    <div className={styles['card-container']}>
      <div className={styles['tabs-wrap']}>
        <Tabs defaultActiveKey={activeTab} onChange={tabsChange}>
          <TabPane tab="实时告警" key="REAL_TIME_ALARM">
            <RealTimeAlarm />
          </TabPane>
          <TabPane tab="历史告警" key="HISTORY_AKARM">
            <HistoryAlarm />
          </TabPane>
        </Tabs>
        <span className={styles['title']}>{alarmTypeName[activeTab]}</span>
      </div>
    </div>
  );
};

export default KeepAliveHoc(memo(Card));
